import React, { Component } from 'react';
import "./index.css";

const MyContext=React.createContext();

export default class A extends Component {
    state={
        username:"EDGQilin"
    };
    render() {
        return (
            <div className="parent">
                <h1>我是A组件</h1>
                <h4>我的用户名是：{this.state.username}</h4>
                <MyContext.Provider value={this.state.username}>
                    <B></B>
                </MyContext.Provider>
            </div>
        );
    };
};

class B extends Component {
    render() {
        // console.log(this);
        return (
            <div className="child">
                <h1>我是B组件</h1>
                <h4>我从A组件获得的用户名是：???</h4>
                <C></C>
            </div>
        );
    };
};

// class C extends Component {
//     static contextType=MyContext;
//     render() {
//         // console.log(this);
//         return (
//             <div className="grand">
//                 <h1>我是C组件</h1>
//                 <h4>我从A组件获得的用户名是：{this.context}</h4>
//             </div>
//         );
//     };
// };

function C(){
    return (
        <div className="grand">
            <h1>我是C组件</h1>
            <h4>我从A组件获得的用户名是：
                <MyContext.Consumer>
                    {
                        (value)=>{
                            return `${value}11`
                        }
                    }
                </MyContext.Consumer>
            </h4>
        </div>
    );
}
